<template>
	<view class="pages">
		<z-paging ref="paging" :show-scrollbar="false" :showScrollbar="false" use-virtual-list @query="getViewData">
			<template #top>
				<piaoyiSwiper :list="recommend" :itemMargin="160" :autoplay="true" :interval="5000" :duration="1000" />
			</template>
			<template #cell="{item,index}">
				<view v-if="item.series.length>0">
					<view class="top">
						<text>{{ item.parent.Name }}</text>
						<uni-icons @click="clickItem(item.parent)" color="white" type="right" size="20"></uni-icons>
					</view>
					<horizontal :list="item.series" />
				</view>
			</template>
		</z-paging>
	</view>
</template>

<script>
	import piaoyiSwiper from '@/components/piaoyi-swiper/piaoyi-swiper.vue'
	import horizontal from '@/components/horizontal.vue'
	import shortlist from '@/components/vertical.vue'

	import request from '@/common/request'

	export default {
		name: 'discover',
		components: {
			piaoyiSwiper,
			horizontal,
			shortlist
		},
		data() {
			return {
				titles: [],
				scrollHeight: 0,
				recommend: [],
				categorys: []
			}
		},
		async onLoad(option) {
			uni.getSystemInfo({
				success: (res) => {
					// 滚动区域高度 = 窗口高度 - 搜索框高度
					this.scrollHeight = res.windowHeight - 50 - 44;
				}
			});
		},
		async onShow(option) {
			this.$nextTick(() => {
				this.$refs.paging.reload();
			})
		},
		methods: {
			clickItem(item) {
				let seriesParams = {
					ParentType: item.CollectionType=="boxsets"?"BoxSet":"MediaSource",
					ChildIds: item.Id,
					ParentName: item.Name
				}
				this.$store.commit("seriesParams",seriesParams)
				uni.navigateTo({
					url: `/pages/series/goDetail?type=${seriesParams.ParentType}&id=${seriesParams.ChildIds}`
				})
			},
			async getViewData() {
				let userTmp1 = uni.getStorageSync('user')
				if (!userTmp1) {
					return
				}
				let userTmp = JSON.parse(userTmp1)
				const data = await request.get(`/emby/Users/${userTmp.userId}/Views`)
				let serverUrl = `${userTmp.serverip}:${userTmp.serverport}`
				if (!serverUrl.startsWith('http')) {
					serverUrl = `http://${serverUrl}`
				}
				let categorys = []
				for (const item of data.Items) {
					let imageStr = `${serverUrl}/emby/Items/${item.Id}/Images/Primary`
					item.cover = imageStr
					const detailData = await request.get(`/emby/Users/${userTmp.userId}/Items/Latest`, {
						Limit: 16,
						Fields: "BasicSyncInfo,CanDelete,PrimaryImageAspectRatio,ProductionYear",
						ImageTypeLimit: 1,
						EnableImageTypes: "Primary",
						ParentId: item.Id
					})
					detailData.forEach(item1 => {
						let imageStr1 = `${serverUrl}/emby/Items/${item1.Id}/Images/Primary`
						item1.cover = imageStr1
					})
					categorys.push({
						parent: item,
						series: detailData
					})
				}
				this.recommend = data.Items
				this.categorys = categorys
				this.$refs.paging.complete(categorys);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
		font-size: 1.2rem;
		font-weight: bold;
	}
	::v-deep .horizontalbox{
		padding: 0 3px;
		overflow-x: auto;
	}
	.no-scrollbar {
	  scrollbar-width: none;
	  -ms-overflow-style: none;
	  padding-right: 20rpx;
	  margin-right: -20rpx;
	}
	
	.no-scrollbar::-webkit-scrollbar {
	  display: none;
	  width: 0;
	  height: 0;
	  -webkit-appearance: none;
	}
	.no-scrollbar::-webkit-scrollbar-track {
	  display: none;
	}
	.no-scrollbar::-webkit-scrollbar-thumb {
	  display: none;
	  -webkit-appearance: none;
	}
</style>